<!doctype html>
<html>

<head>
<meta charset="utf-8">
<link media="all" href="css/home.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>


<script type="text/javascript" src="js/addressSelect.js"></script>
<script type="text/javascript" src="js/select.ui.js"></script>
<script src="js/datetime/zepto.js"></script>
<!-- Mobiscroll JS and CSS Includes -->

<script src="js/datetime/mobiscroll.zepto.js"></script>
<script src="js/datetime/mobiscroll.core.js"></script>
<script src="js/datetime/mobiscroll.frame.js"></script>
<script src="js/datetime/mobiscroll.scroller.js"></script>
<script src="js/datetime/mobiscroll.util.datetime.js"></script>
<script src="js/datetime/mobiscroll.datetimebase.js"></script>
<script src="js/datetime/mobiscroll.datetime.js"></script>
<script src="js/datetime/mobiscroll.frame.ios.js"></script>
<script src="js/datetime/i18n/mobiscroll.i18n.zh.js"></script>
<link href="css/mobiscroll.frame.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.frame.ios.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" />
<title>登山手机页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="" name="Keywords">
<meta content="" name="Description">
<!-- Mobile Devices Support @begin -->
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telephone=no, address=no">
<meta content="yes" name="apple-mobile-web-app-capable"> <!-- apple devices fullscreen -->
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<!-- Mobile Devices Support @end -->
<link href="favourite.ico" rel="shortcut icon">
<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
</head>
<body>
<div id="main">
	<header>
		<!--<a  class='return'></a>-->
		<a  class='home'></a>
		
		个人资料
		
		<a  class='exit'></a>
    </header>

	
	<!-- 主体内容 begin-->
    <div class="cell">
    	<div class="panel">
			<form onsubmit='alert("提交成功");'>
			 
			 <table class='celler'>
			   <tr>
				 <td colspan='2' class='top_none'><input id="author" name="" type="text" class="all" autocomplete="off" placeholder="真实姓名"/></td>
			   </tr>		 
			   <tr>
				 <td colspan='2' style='padding-top:10px'>
				   <lable class='huge'>性别:</lable>
				   <lable name='male' class='radio'>先生</lable>
				   <lable class='blank'></lable>
				   <lable name='female' class='radio checked'>女士</lable>
				 </td>
			   </tr>		 
			   <tr>
				 <td width='120'><lable class='huge'>出生日期:</lable>
				 </td>
				 <td><div data-role="fieldcontain" ><input type="text" id="date" class='all' placeholder="请选择" /></div>
				 </td>
			   </tr>
			   <tr>
				 <td><lable  class='small'>团队归属地:</lable></td>
				 <td><select name="province"  class="select1"  id="province"><option value="">选择省</option></select></td>
			   </tr>
			   <tr>
				 <td></td>
				 <td><select name="province"  class="select1"  id="city"><option value="">选择市</option></select>
			   </tr>
			   <tr>
				 <td></td>
				 <td><select name="district"  class="select1"  id="district"><option value="">选择区</option></select>
			   </tr>
			   <tr>
				 <td></td>
				 <td class='top_none'><input  id="detail_address" name="" type="text" class="all" autocomplete="off" placeholder="具体地址"/>
			   </tr>
			   <tr>
				 <td colspan='2' class='top_none'><input  id="email" name="" type="text" class="all" autocomplete="off" placeholder="电子邮箱地址"/></td>
			   </tr>
			   <tr>
				 <td colspan='2' class='top_none'><input  id="qq" name="" type="text" class="all" autocomplete="off" placeholder="QQ号码"/></td>
			   </tr>	
			   <tr>
				 <td colspan='2' class='top_none'><input  id="wechat" name="" type="text" class="all" autocomplete="off" placeholder="微信号"/></td>
			   </tr>
			   <tr>
				 <td colspan='2' class='top_none'><a  class="submit" >提交</a></td>
			   </tr>	
				   
			 </table>
			</form>
        </div>
    </div>
	<!-- 主体内容 end-->	
	
	<!-- 尾部 begin-->	
	<footer>
	  <p>© 2014超级联赛</p>
	</footer>
	<!-- 尾部 end-->	
</div>
<script type='text/javascript'>
 window.onload = function(){
    var residenceAddress = new addressSelector(document.getElementById("province"),document.getElementById("city"),document.getElementById("district"));  //省市区三级联动
	$('#date').mobiscroll().date({ //日期选择器初始化
		theme: 'ios',     
		mode: 'mixed',      
		display: 'top', 
		lang: 'zh'      
	});
	$('lable.radio').click(function(){  //radio 切换
	   if(!$(this).hasClass('checked')){
	       $('lable.radio').removeClass('checked');
	       $(this).addClass('checked');
	   }
	});
	$('a.submit').click(function(){
	  $('form').first().submit()
	})
	
	function selectInt(){
		$(".select1").width(parseInt($(window).width())-150)
		$(".select1").uedSelect({
			width : parseInt($(window).width())-120			  
		});		
	}
	selectInt()

	
	$(window).resize(function(){
		$(".ue-state-default").width(parseInt($(window).width())-150)
		$(".select1").width(parseInt($(window).width())-150)	
	})
}    



</script>
</body>
</html>